<template>
  <div>
    <div class="text">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card shadow="hover" style=" background-color: orange;">
              <div>
                <i class="el-icon-user-solid"></i>
              </div>
              <div>
                <h1>用户总数</h1>
                <span>{{total}}</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card shadow="hover" style=" background-color:#EE6666;">
              <div>
                <i class="el-icon-s-custom"></i>
              </div>
              <div>
                <h1>门店数量</h1>
                <span>14</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card shadow="hover" style=" background-color: #5470C6;">
              <div>
                <i class="el-icon-folder"></i>
              </div>
              <div>
                <h1>文件管理</h1>
                <span>{{ totalFile }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card shadow="hover" style=" background-color: #91CC75;">
              <div>
                <i class="el-icon-edit-outline"></i>
              </div>
              <div>
                <h1>订单数量</h1>
                <span>1223</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="item">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card shadow="hover" class="center">
            <div id="main" style="width:500px; height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="center">
            <div id="pie" style="width:500px; height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="center">
            <div id="waterfall" style="width:500px; height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="center">
            <div id="Nightingale" style="width:500px; height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card shadow="hover">
            <div id="across" style=" height:400px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "Home",
  data () {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      totalFile: 0
    }
  },
  created () {
    this.load()
    this.file()
  },
  methods: {
    //用户总数
    load () {
      this.request.get("/user/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
          email: this.email,
          address: this.address,
        }
      }).then(res => {
        this.total = res.data.total
      })
    },
    //文件管理
    file () {
      this.request.get("/file/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res => {
        this.totalFile = res.data.total

      })
    },
  },
  //页面元素渲染后再触发
  mounted () {
    var option = {
      title: {
        text: '各季度会员数量统计',
        subtext: '趋势图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      xAxis: {
        type: 'category',
        data: ["第一季度", "第二季度", "第三季度", "第四季度"]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: "星巴克",
          data: [],
          type: 'bar'
        },
        {
          name: "星巴克",
          data: [],
          type: 'line'
        },
        {
          name: "瑞幸咖啡",
          data: [],
          type: 'bar'
        },
        {
          name: "瑞幸咖啡",
          data: [],
          type: 'line'
        }
      ]
    };

    // 饼图
    var pieOption = {
      title: {
        text: '各季度会员数量统计',
        subtext: '比例图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: "星巴克",
          type: 'pie',
          radius: '55%',
          center: ['25%', '70%'],
          label: {            //饼图图形上的文本标签
            normal: {
              show: true,
              position: 'inner', //标签的位置
              textStyle: {
                fontWeight: 300,
                fontSize: 14,    //文字的字体大小
                color: "#fff"
              },
              formatter: '{c}({d}%)'
            }
          },
          data: [],  // 填空
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          name: "瑞幸咖啡",
          type: 'pie',
          radius: '50%',
          center: ['75%', '50%'],
          label: {            //饼图图形上的文本标签
            normal: {
              show: true,
              position: 'inner', //标签的位置
              textStyle: {
                fontWeight: 300,
                fontSize: 14,    //文字的字体大小
                color: "#fff"
              },
              formatter: '{d}%'
            }
          },
          data: [
            { name: "第一季度", value: 5 },
            { name: "第二季度", value: 6 },
            { name: "第三季度", value: 7 },
            { name: "第四季度", value: 8 }
          ],  // 填空
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ],

    };
    //横图
    var acrossoption = {
      title: {
        text: '各季度会员数量统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ["第一季度", "第二季度", "第三季度", "第四季度"]
      },
      series: [
        {
          name: '星巴克',
          type: 'bar',
          data: []
        },
        {
          name: '瑞幸咖啡',
          type: 'bar',
          data: []
        }
      ]
    };


    //瀑布图
    var waterfalloption = {
      title: {
        text: '星巴克季度会员图',
        subtext: '瀑布图'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          var tar = params[1];
          return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        splitLine: { show: false },
        data: ["第一季度", "第二季度", "第三季度", "第四季度"]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Placeholder',
          type: 'bar',
          stack: 'Total',
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            }
          },
          data: []
        },
        {
          name: 'Life Cost',
          type: 'bar',
          stack: 'Total',
          label: {
            show: true,
            position: 'inside'
          },
          data: []
        }
      ]
    };
    //饼图
    var Nightingaleoption = {
      title: {
        text: '星巴克各季度管理人数统计',
        subtext: '统计图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '星巴克',
          type: 'pie',
          radius: '50%',
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    //数据
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);

    var acrossDom = document.getElementById('across');
    var acrossChart = echarts.init(acrossDom);

    var waterfallchartDom = document.getElementById('waterfall');
    var waterfallmyChart = echarts.init(waterfallchartDom);

    var NightingalechartDom = document.getElementById('Nightingale');
    var NightingalemyChart = echarts.init(NightingalechartDom);
    this.request.get("/echarts/members").then(res => {
      // 填空
      option.series[0].data = res.data
      option.series[1].data = res.data

      option.series[2].data = [5, 6, 7, 8]
      option.series[3].data = [5, 6, 7, 8]
      // 数据准备完毕之后再set
      myChart.setOption(option);

      pieOption.series[0].data = [
        { name: "第一季度", value: res.data[0] },
        { name: "第二季度", value: res.data[1] },
        { name: "第三季度", value: res.data[2] },
        { name: "第四季度", value: res.data[3] },
      ]
      pieChart.setOption(pieOption)

      acrossoption.series[0].data = res.data
      acrossoption.series[1].data = [5, 6, 7, 8]
      acrossoption && acrossChart.setOption(acrossoption);

      waterfalloption.series[0].data = res.data
      waterfalloption.series[1].data = res.data
      waterfalloption && waterfallmyChart.setOption(waterfalloption);

      Nightingaleoption.series[0].data = [
        { name: "第一季度", value: res.data[0] },
        { name: "第二季度", value: res.data[1] },
        { name: "第三季度", value: res.data[2] },
        { name: "第四季度", value: res.data[3] },
      ]
      Nightingaleoption && NightingalemyChart.setOption(Nightingaleoption);
    })
  }
};
</script>

<style lang="less" scoped>
.el-card__body {
  width: 50%;
}
.text .el-card {
  height: 120px;
  margin-bottom: 20px;
  color: #fff;
  i {
    font-size: 70px;
  }
  div {
    width: 50%;
    float: left;
  }

  h1 {
    margin-top: 5px;
    margin-bottom: 10px;
  }
  span {
    font-size: 18px;
  }
}
.item .el-col {
  margin-bottom: 20px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>